<!DOCTYPE html>
<html>
<head>
    <title>电子书商城</title>
</head>
<body class="bgf6">

<style>
    .explain_box {
        padding: 8px 0 0 5px;
        border-top: 1px dashed #dbdbdb;
    }
</style>

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">

            <div th:include="common/boAtmLeft :: atmLeft"></div>

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <el-row>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <img :src="commodity.picUrl">
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content">
                                    <div>
                                        <span style="font-size: 16px">{{commodity.commoName}}</span>
                                    </div>
                                    <div>
                                        <div class="explain_box">
                                            <p dd_name="作者" id="author">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者：<span>{{commodity.author}}</span></p>
                                            <p dd_name="出版社" id="publisher">出&nbsp;&nbsp;版&nbsp;&nbsp;社：<span>{{commodity.press}}</span></p>
                                            <p>出版时间：{{commodity.publishTime}}</p>

                                            <p>字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：{{commodity.wordNum}}</p>
                                        </div>
                                    </div>
                                </div>

                                <div style="margin: 70px 0px">
                                    <el-button type="danger" @click="addCard">加入购物车</el-button>
                                    <a href="###"><img src="/images/cart.png"></a>

                                </div>
                            </el-col>
                        </el-row>


                        <div style="margin: 100px 0px;">
                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="读书简介" name="first">


                                    <div style="margin: 20px 10px">
                                        {{commodity.introduce}}
                                    </div>
                                </el-tab-pane>

                            </el-tabs>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">

    var commoId = '[[${commodityId}]]';

    var ebookVue = new Vue({
        el : '#app',
        data : {
            commodity : {}
        },
        created : function () {
            loadCommodity();
        },
        methods : {
            addCard : function () {
                dayuanit.ajax('/card/addCard', {
                    commoId : commoId,
                    buyNum : 1
                }, function (result) {
                    alert('添加成功');
                    window.location.href = '/cart/toCart';
                })
            }
        }
    });

    function loadCommodity() {
        dayuanit.ajax('/loadCommodity', {
            commoId : commoId
        }, function (result) {
            ebookVue.commodity = result.data;
        })
    }

</script>

</body>
</html>
